<template>
	<div style="width: 400px; margin-top: 50px; margin-left: 40px">
		<el-form
			:label-position="labelPosition"
			label-width="80px"
			:model="animalForm"
		>
			<el-form-item label="动物编号" prop="animalNo">
				<el-input
					v-model="animalForm.animalNo"
					placeholder="请输入动物编号"
				></el-input>
			</el-form-item>
			<el-form-item label="当前位置" prop="animalLocation">
				<el-input
					v-model="animalForm.animalLocation"
					placeholder="请输入动物当前位置"
				></el-input>
			</el-form-item>
			<el-form-item label="实时照片" prop="account">
				<el-upload
					class="upload-demo"
					action=""
					:file-list="fileList"
					list-type="picture"
					:before-upload="uploadFile"
					:show-file-list="false"
					accept="image/png,image/jpeg,image/jpg"
				>
					<div slot="tip" class="el-upload__tip">
						只能上传jpg/png文件，且不超过500kb
					</div>
					<el-button size="small">点击上传</el-button>
				</el-upload>
			</el-form-item>
			<el-form-item>
				<div
					v-for="(item, index) in animalForm.animalPhotoList"
					:key="index"
					class="preIMGlist"
				>
					<el-image
						:src="item.url"
						:preview-src-list="animalForm.animalPhotoList"
						style="width: 100px; height: 100px"
					>
					</el-image>
					<span @click="delPIC(index)" class="el-icon-circle-close"></span>
				</div>
			</el-form-item>
			<el-button type="primary" @click="submitData">确定</el-button>
			<el-button>重置</el-button>
		</el-form>
	</div>
</template>

<script>
import request from "@/utils/request";
import client from "@/utils/alioss";

export default {
	name: "AddUserView",
	data() {
		return {
			labelPosition: "left",
			animalForm: {
				animalNo: "",
				animalLocation: "",
				animalPhotoList: [],
			},
			fileList: [],
		};
	},
	methods: {
		submitData() {
			// 发送请求
		},
		// 上传图片
		async uploadFile(file) {
			console.log(file);
			// 判断文件是否是图片类型并且大小是否超过500kb
			const isPIC =
				file.type === "image/jpg" ||
				file.type === "image/png" ||
				file.type === "image/jpeg";
			const isLt500K = file.size / 1024 < 500;
			if (!isPIC) {
				this.$message.error("上传图片只能是 JPG/PNG 格式!");
				return false;
			}
			if (!isLt500K) {
				this.$message.error("上传图片大小不能超过 500KB!");
				return false;
			}
			const fileName = file.name; // 上传到OSS的文件名
			try {
				const result = await client.put(fileName, file); // 上传文件
				console.log("上传成功:", result);
				// 处理上传成功后的逻辑，例如更新文件链接
				this.animalForm.animalPhotoList.push({
					name: result.name,
					url: result.url,
				});
			} catch (error) {
				console.error("上传失败:", error);
				// 处理上传失败后的逻辑
			}
		},
		// 移除图片
		delPIC(index) {
			this.animalForm.animalPhotoList.splice(index, 1);
		},
	},
};
</script>

<style scoped>
.el-form .el-form-item .preIMGlist {
	position: relative;
	display: inline-block;
	margin-right: 20px;
}

.el-form .el-form-item .preIMGlist .el-icon-circle-close {
	position: absolute;
	top: -10px;
	right: -10px;
	font-size: 20px;
	cursor: pointer;
	visibility: hidden;
}

.el-form .el-form-item .preIMGlist:hover .el-icon-circle-close {
	visibility: visible;
}
</style>
